<template>
    <div>
      <div class="headstyle" v-show="isshow">
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                <span class="locsty"><i class="el-icon-location iconsty"></i>当前位置：学生数据统计>培训学员数据</span>
                </div>
            </el-col>          
              <el-col :span="8" align="center">
                  <el-button type="primary" @click="exportData" >导出Excel</el-button>
                  
                  <el-button type="primary" plain @click="goTo('/stsumdata')" class="backbtn">返回</el-button>                   
              </el-col>         
          </el-row>
      </div>
      <div class="contentstyle" >
            <el-table
            :data="tableData.filter(data => tableData[0].stcard!='')"
            border
            style="width: 100%" 
            height="500px"          
            :span-method="objectSpanMethod"
            :header-cell-style="{
              'background':'#e6f3f8',
              'font-weight':'800',
              'color':'black'
            }">
            <!-- <el-table-column prop="rownum" label="序号" align="center"> </el-table-column> -->
            <el-table-column  prop="stname" label="学员姓名" align="center"></el-table-column>
            <el-table-column  prop="stcard" label="身份证号" align="center"></el-table-column>
            <el-table-column  prop="couname" label="课程名称" align="center"> </el-table-column>
            <el-table-column prop="classdate" label="课程培训日期"  align="center"></el-table-column>
            <el-table-column  prop="sign" label="是否签到"  align="center"> </el-table-column>
            <el-table-column  prop="classinter" label="课堂互动" align="center"></el-table-column>
            <el-table-column  prop="classnote" label="学习心得是否上传" align="center">
              <template slot-scope="scope">
                <el-button round style="border-color: black;color:black" v-if="scope.row.classnote===''">未上传</el-button>
                <el-button round style="border-color: #527bf2;color:#527bf2" v-else @click="OpenDetails(scope.$index, scope.row)">已上传</el-button>
              </template>
            </el-table-column>            
            <el-table-column  prop="score" label="综合考试" align="center"></el-table-column>
            <el-table-column prop="pt_flag" label="培训确认表是否上传" align="center">
              <template slot-scope="scope">
                    <el-button round style="border-color: black;color:black" v-if="scope.row.pt_flag===''">未上传</el-button>
                    <el-button round style="border-color: blue;color:blue" v-else-if="scope.row.pt_flag===0" @click="OpenPic(scope.$index, scope.row)">待审核</el-button>
                    <el-button round style="border-color: green;color:green" v-else-if="scope.row.pt_flag===1" @click="OpenPic(scope.$index, scope.row)">已通过</el-button>
                    <el-button round style="border-color: red;color:red" v-else @click="OpenPic(scope.$index, scope.row)">未通过</el-button>                   
                </template>             
            </el-table-column>
          </el-table>          
      </div>
      <div class="bulitContent" v-show="noteflag">
        <div class="bulitBg"></div>
        <div class="bulitContentDetail">
            <p class="bulitTitle">
                <span><b>心得体会</b></span>
                <i class="el-icon-close closesty" @click="noteEnd"></i> 
            </p>
            <div style="height: 70%">
                <span>
                    <textarea class="tarea" v-model="noteinfo" readonly></textarea>
                </span>
            </div>
            <div  class="notebtn">
              <el-button type="primary" style="width:80px;" @click="noteEnd">确定</el-button>
            </div>
        </div>
      </div>
      <div class="bulitContent" v-show="optionflag">
            <div class="bulitBg"></div>
            <div class="bulitContentDetail">
                <p class="bulitTitle">
                    <span id="titleid">{{datas.pt_name}}</span>
                    <i class="el-icon-close closesty" @click="optionend"></i> 
                </p>                
                <div class="demo-image__preview openimg">
                    <el-image 
                        style="width: 300px; height: 300px"                          
                        :src="datas.pt_url"
                        :preview-src-list="srcList">
                    </el-image>
                </div>                                                             
                <div class="bulitItem">
                    <el-input
                      type="textarea"
                      :rows="2"                     
                      class="textareasty"
                      v-model="datas.pt_text"
                      readonly>
                    </el-input>                  
                </div>
            </div>          
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isshow: true,
      Dt_Id: this.$route.params.Dt_Id,
      datas: [], //图片信息
      srcList: [],
      noteinfo:"",//心得体会详情
      //课堂材料数据
      tableData: [
        {
          //rownum:"",
          stname: "",
          stcard: "",
          couname: "",
          sign: "",
          classinter: "",
          classnote: "",
          classdate: "",
          pt_flag: "",
          pt_name: "",
          pt_url: "",
          pt_text: "",   
          score: ""
        }
      ],
      arr1: [],
      optionflag: false,
      noteflag: false,
    };
  },
  //页面初次加载
  mounted: function() {
    this.loadauth();     
  },
  // created() {
  //   this.setdates(this.tableData);
  // },
  methods: {
    loadauth() {
      if (this.$store.state.teacherinfo == null) {
        this.$message({
          type: "info",
          message: "登录失效，请重新登录!"
        });
        this.$router.push("/login");
      } else {
        var teacher = JSON.parse(this.$store.state.teacherinfo);
        if (teacher.Te_isadmin == 0 || teacher.Te_isadmin == 4) {
          this.isshow = false;
          this.Dt_Id = this.$store.state.dtid;
          this.selectwebStuTrains();
        }
        else{
            this.selectStuTrains();
        }
      }
    },
    //获取相同数据列
    setdates(arr) {
      var obj = {},
        k,
        arr1 = [];
      for (var i = 0, len = arr.length; i < len; i++) {
        k = arr[i].stcard;
        if (obj[k]) obj[k]++;
        else obj[k] = 1;
      }
      //console.log(obj)
      //保存结果{el-'元素'，count-出现次数}
      for (var o in obj) {
        for (let i = 0; i < obj[o]; i++) {
          if (i === 0) {
            this.arr1.push(obj[o]);
          } else {
            this.arr1.push(0);
          }
        }
      }
      //console.log(this.arr1);
    },
    //合并相同数据列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ( columnIndex === 0 || columnIndex === 1 ||columnIndex === 6 || columnIndex === 7 || columnIndex === 8 ) {
        let _row = this.arr1[rowIndex];
        let _col = this.arr1[rowIndex] > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (columnIndex === 1 && this.tableData[rowIndex].stcard == 1) {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    },
    //点击链接跳转
    goTo(path) {
      this.$router.replace(path);
    },
    //课程查询方法
    selectStuTrains() {
      this.$axios
        .get("/admin/getdatatrainInfo/" + this.Dt_Id)
        .then(json => {
          if (json.data == "logout") {
            this.$message({
              type: "info",
              message: "您的登录信息已失效，请重新登录！"
            });
            this.$router.push("/login");
          } else {
            //console.log(json.data);
            var datalist = json.data;
            var trainlistdata = [];
            for (let i = 0; i < datalist.length; i++) {
              var item = {
                //rownum: i + 1,
                stname: datalist[i].St_Name,
                stcard: datalist[i].St_Card,
                couname: datalist[i].Cos_Name,
                sign: "是",
                classdate: datalist[i].Sig_time,
                classinter: datalist[i].Score_fruit==null?"":datalist[i].Score_fruit,
                pt_flag: datalist[i].Pt_Flag==null?"":datalist[i].Pt_Flag,
                pt_name: datalist[i].Pt_Name,
                pt_url: this.$store.state.respath+datalist[i].Pt_Url,
               // pt_url:
                 // "http://222.190.113.220:8087/upload/teacher/545c4ebd-5c20-463d-8783-ccd63e9b9b27.jpg",
                pt_text: datalist[i].Pt_Text==null?"":datalist[i].Pt_Text,                                            
                classnote: datalist[i].Exp_Values==null?"":datalist[i].Exp_Values,
                score: datalist[i].score,              
              };
              trainlistdata[i] = item;
            }
            this.tableData = trainlistdata;
            this.setdates(this.tableData);
          }
        })
        .catch(error => {});
    },
    selectwebStuTrains() {
      this.$axios
        .get("/admin/getdatastulist/" + this.Dt_Id+"/V2")
        .then(json => {
          if (json.data == "logout") {
            this.$message({
              type: "info",
              message: "您的登录信息已失效，请重新登录！"
            });
            this.$router.push("/login");
          } else {
            var datalist = json.data;
            var trainlistdata = [];
            for (let i = 0; i < datalist.length; i++) {
              var item = {
                //rownum: i + 1,
                stname: datalist[i].St_Name,
                stcard: datalist[i].St_Card,
                couname: datalist[i].Cos_Name,
                sign: "是",
                classdate: datalist[i].Sig_time,
                classinter: datalist[i].Score_fruit==null?"":datalist[i].Score_fruit,
                pt_flag: datalist[i].Pt_Flag==null?"":datalist[i].Pt_Flag,
                pt_name: datalist[i].Pt_Name,
                pt_url: this.$store.state.respath+datalist[i].Pt_Url,            
                pt_text: datalist[i].Pt_Text==null?"":datalist[i].Pt_Text,                                            
                classnote: datalist[i].Exp_Values==null?"":datalist[i].Exp_Values,
                score: datalist[i].score,              
              };
              trainlistdata[i] = item;
            }
            this.tableData = trainlistdata;
            this.setdates(this.tableData);
          }
        })
        .catch(error => {});
    },
    //打开心得查看
    OpenPic(index,row){
      this.datas = row;
      this.srcList = [this.datas.pt_url];
      this.optionflag = true;     
    },
    //关闭材料查看
    optionend(){
      this.optionflag= false;
      this.srcList = [];
    },
    //关闭心得查看
    noteEnd(){
      this.noteflag = false;
      this.noteinfo = "";
    },
    //打开心得查看
    OpenDetails(index,row){
     
      //consoleconsole.log(row);
      this.noteinfo = row.classnote;
      this.noteflag = true;
    },
    exportData() {     
        this.$axios
          .get("/admin/btnExportRecords/" + this.Dt_Id + "/V1")
          .then(res => {
            if(res.data=="nodata"){
               this.$message({
                type: "info",
                message: "数据为空，无法导出！"
              });
            }else{
              var url = res.data;
              location.href = this.$store.state.respath + url;
            }
          })
          .catch(function(error) {});
      }
    
  }
};
</script>



<style scoped>
.closesty {
  float: right;
  font-size: 27px;
  line-height: 40px;
}
.locsty {
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.editsty {
  padding: 3px;
  font-size: large;
}
.iconsty {
  color: #53b9fe;
  font-size: 22px;
}
.headstyle {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}
.contentstyle {
  text-align: center;
  width: 90%;
  padding: 40px;
}
.title {
  margin: 0 0 20px;
  border-bottom: 1px solid #ddd;
  padding: 14px 0;
  background-color: #fff;
}
/* 点击新建按钮弹框 */
.bulitContent {
  /* display: none; */
  position: fixed;
  top: 15%;
  bottom: 0;
  width: 65%;
  z-index: 10000;
}
.bulitBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* background-color:#d9d9d9; */
  background-color: #7f7f7f;
  /* rgba(217,217,217,0.x) */
  z-index: -10;
  opacity: 0.5;
}
.bulitContentDetail {
  background: #fff;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  margin-top: 20px;
}
.bulitTitle {
  height: 40px;
  background: #e1e5f4;
  line-height: 40px;
  font-size: 17px;
  color: gray;
  padding-left: 15px;
  letter-spacing: 1px;
}
/* .bulitItem {
  text-align: center;
} */
.bulitItem select {
  width: 190px;
  height: 30px;
}

.bulitItem {
  padding: 15px;
}

.openimg {
  padding: 10px;
  text-align: center;
}

.btnsty {
  text-align: center;
  padding-top: 20px;
}
.tarea {
  margin: 11px;
  height: 100%;
  width: 95%;
}
.notebtn{
    padding-top: 30px;
    float: right;
    padding-right: 10px;
}

</style>



